<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>电影管理</el-breadcrumb-item>
         <el-breadcrumb-item>电影列表</el-breadcrumb-item>
     </el-breadcrumb>
     <el-divider></el-divider>
     <!-- 搜索表单 -->
     <el-form :inline='true' :model="searchForm" class="demo-form-inline">
        <el-form-item label="电影名称">
            <el-input v-model="searchForm.MovieName" placeholder="请输入点电影名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
     </el-form>
     <el-divider content-position="left">电影列表</el-divider>
     <!-- 表格显示电影列表 -->
     <template v-if="tableData">
      <el-table  :data="tableData.result"  style="width: 100%" :stripe='true'> 
      <el-table-column align="center" prop="cover" label="封面" width="120">
        <template slot-scope="scope">
          <el-image
          style="width: 80px; height: 100px"
          :src="scope.row.cover"
          fit=" contain"></el-image>
      </template>
      </el-table-column>
      <el-table-column  align="center" prop="title"  label="标题"  width="140"></el-table-column>
      <el-table-column align="center" prop="star_actor" label="主演" width="130"> </el-table-column>
      <el-table-column align="center" prop="showingon" label="上映时间" width="120"> </el-table-column>
      <el-table-column  align="center" prop="duration"  label="时长"  width="110">
        <template slot-scope="scope">
            <span>{{scope.row.duration}}分钟</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="category_id" label="所属类别" width="115"> 
        <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.category_id == 1">热映</el-tag>
            <el-tag v-if="scope.row.category_id == 2">待映</el-tag>
            <el-tag type="success" v-if="scope.row.category_id == 3">经典</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="215">
         <template slot-scope="scope">
             <el-button type="info" icon="el-icon-user" circle
             @click="showEdActorDialog(scope.row.id)"
             ></el-button>         
             <el-button type="success" icon="el-icon-picture" circle
             @click="showEdiThumbDialog(scope.row.id)"
             ></el-button>
             <el-button type="warning" icon="el-icon-edit" circle 
             @click="$router.push(`/home/movie-update/${scope.row.id}`)"></el-button>
             <el-button type="danger" icon="el-icon-delete" circle 
             @click="deleteMovie(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
     style="margin:20px 0;text-align:right;"
     background layout="prev, pager, next"
     :total="tableData.total"
     :page-size="Number(tableData.pagesize)"
     @current-change="handleCurrentChange"
     ></el-pagination>  
     </template>
    <!-- 设置电影剧照弹框 -->
<el-dialog title="剧照管理" :visible.sync="dialogVisible" width="30%">
  <el-upload
  class="upload-demo"
  ref="upload"
   action="http://localhost:9000/upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  multiple
  :on-success="handleAvatarSuccess"
  :file-list="fileList"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">添加剧照</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
   <el-button size="small" @click="$router.push(`/home/movie-thumb-list/${movie_id}`)">管理剧照列表</el-button>
</el-upload>
</el-dialog>


<el-dialog
  title="提示"
  :visible.sync="dialogActor"
  width="50%">
    <el-transfer
    filterable
    :titles="['演员列表','已选择演员']"
    filter-placeholder="请输入城市拼音"
    v-model="transferValue"
    :data="transferData">
  </el-transfer>
  <div style="text-align: right;margin-top:20px;">
  <el-button @click="dialogActor = false" >取 消</el-button>
  <el-button type="primary" @click="submitActor">确 定</el-button>

  </div>
  
</el-dialog>
    </div>
</template>

<script>
import { Result } from 'element-ui'
    export default {
        data() {
            return {
                transferData:[],//原始数据
                transferValue:[],//选中数据
                dialogActor:false,//是否显示配置演员穿梭框
                movie_id:'',
                fileList:[],//保持上传的图片列表
                dialogVisible:false,//对话框显示与否
                actorList:'',//绑定演员列表
                searchForm:{
                    MovieName:'',//绑定演员名字
                },
                tableData: []
            }
        },   
        methods: {
            //处理上传成功之后
            handleAvatarSuccess(res){
               console.log(res)
               let url = res.data
               let movie_id = this.movie_id
               this.$http.moviethumb.add({url:url,movie_id:movie_id}).then(res => {
                console.log(res)
                if(res.data.code == 200){
                    this.$message({
            type: 'success',
            message: '添加成功!'
          });
                }
               })
            },
            //显示上传剧照对话框
            showEdiThumbDialog(id){
                this.dialogVisible = true
                this.movie_id = id
            },
            //显示配置演员穿梭框
            showEdActorDialog(id){
               this.dialogActor = true
               this.movie_id = id
               this.$http.actorApi.listBymovieId({movie_id:id}).then(res => {
                console.log(res)
                if(res.data.code == 200){
                    this.transferValue = []
                    res.data.data.forEach(item => {
                        this.transferValue.push(item.actor_id)
                    })
                    console.log(this.transferValue)
                }
               })
            },
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
            //删除电影
            deleteMovie(id){
                const h = this.$createElement;
        this.$msgbox({
          title: '删除电影',
          message: h('p', null, [
            h('span', null, '确认删除该电影吗？ '),
            h('i', { style: 'color: teal' })
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 800);
            } else {
              done();
            }
          }
        }).then(action => {
            this.$http.movieapi.delete({id}).then(res => {
                if(res.data.code == 200){
                   this.$message({
            type: 'success',
            message: '删除成功'
          });  
          this.loadMovieLIst()
          }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          });       
        });
            },
            //实现分页效果
            handleCurrentChange(val){
                console.log(val)
                let name = this.searchForm.MovieName
                if(!name){
                this.$http.movieapi.List({page:val,pagesize:3}).then(res => {
                    this.tableData = res.data.data
                })
                }else{
                    this.$http.movieapi.ListByname({name:name,page:val,pagesize:3}).then(res => {
                    this.tableData = res.data.data
                })
                }
            },
 //点击查询执行  
            onSearch() {
               let name = this.searchForm.MovieName
               if(!name){
                this.loadMovieLIst()
               }else{
                this.$http.movieapi.ListByname({name:name,page:1,pagesize:3}).then(res => {
                    this.tableData = res.data.data
                })
               }
            },
             /**
             * 加载电影列表
             */
            loadMovieLIst(){
              this.$http.movieapi.List({page:1,pagesize:3}).then(res => {
                console.log(res)
                this.tableData = res.data.data
              })
        },
           //加载穿梭框演员列表
         loadActor(){
            this.$http.actorApi.list({page:1,pagesize:1000}).then(res => {
                console.log(res.data.data)
                if(res.data.code == 200){
                res.data.data.forEach(element => {
                    this.transferData.push({
                        key:element.id,
                        label:element.actor_name
                    })
                });
               } 
            })
         },
         //提交穿梭框的数据
         submitActor(){
        //    console.log(this.transferValue)
            let actor_ids =  this.transferValue.toString()
            console.log({movie_id:this.movie_id,actor_ids:actor_ids})
            this.$http.movieapi.bindActor({movie_id:this.movie_id,actor_ids:actor_ids}).then(res => {
                console.log(res)
                if(res.data.code == 200){
                    this.$message({
                     message: '配置演员成功',
                     type: 'success'
                     });
                   }
                })
                this.dialogActor = false
              }
            },
      
           
        //挂在完毕后执行的生命周期
        mounted(){
            //电影列表
            this.loadMovieLIst()
            //演员列表
            this.loadActor()
        }
    }
</script>

<style lang="less" scoped>
</style>